<template>
  <div>
    <Modal :mask-closable="false" title="修改密码" v-model="isDialog" @on-cancel="onClose">
      <Form :model="form" label-position="left" :label-width="100" style="padding:0 30px;">
        <FormItem label="用户名：">
          <Input v-model="name" disabled/>
        </FormItem>
        <FormItem label="原密码：">
          <input type="password" style="display: none;"/>
          <Input
              v-model="form.formerPassword"
              type="password"
              autocomplete="new-password"
              password
          />
        </FormItem>
        <FormItem label="新密码：">
          <Input v-model="form.passWord" type="password" password/>
        </FormItem>
        <FormItem label="确认新密码：">
          <Input v-model="form.passWordAgain" type="password" password/>
        </FormItem>
        <Icon type="ios-checkmark-circle"/>
        密码由8-16位组成</br>
        <Icon type="ios-checkmark-circle"/>
        密码由数字(0-9)、大写字母、小写字母、特殊字符组成</br>
        <Icon type="ios-checkmark-circle"/>
        至少包含以上三种字符
      </Form>
      <div slot="footer">
        <Button @click="onClose">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" @click="onSubmit">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isDialog: false,
      form: {},
      name: '',
    }
  },
  mounted() {
    this.name = window.localStorage.getItem('ziyunFactoryPortalName')
  },
  methods: {
    checkPasswordLimit() {
      //必须包含数字(0-9)、大写字母、小写字母、特殊字符 中的至少三种
      const validObj = this.getPasswordLimitHasNumber()

      if (!validObj.isValid) {
        return false;
      } else return true
    },
    getPasswordLimitHasNumber() {
      const arrStr = [];
      const password = this.form.passWord;
      /\d/.test(password) || arrStr.push('密码必须包含数字(0-9)');
      /[a-z]/.test(password) || arrStr.push('密码必须包含小写字母');
      /[A-Z]/.test(password) || arrStr.push('密码必须包含大写字母');
      /[!@#$%^&*]/.test(password) || arrStr.push('密码必须包含特殊字符');
      const isValid = arrStr.length <= 1;
      console.log(arrStr, isValid);
      if (password.length < 8 || password.length > 16) {
        return {
          isValid: false,
          tipStr: '密码长度为8-16位'
        }
      } else if (!isValid) {
        return {isValid, tipStr: arrStr[0]};
      } else return {isValid: true, tipStr: arrStr[0]};
    },
    onClose() {
      this.form = {}
      this.isDialog = false
    },
    onSubmit() {
      if (
          this.form.formerPassword &&
          this.form.passWord &&
          this.form.passWordAgain
      ) {
        if (this.form.passWord !== this.form.passWordAgain) {
          this.$Message.error(({content: "两次密码不一样，请修改！", duration: 6, closable: true}));
          return
        }
        if (!this.checkPasswordLimit()) {
          this.$Message.error(({content: "密码复杂度较低，请修改！", duration: 6, closable: true}));
          return
        }
        this.axios({
          method: 'post',
          url: "/basic/user/updatePwd",
          data: {
            newPwd: this.form.passWord,
            oldPwd: this.form.formerPassword
          }
        }).then(res => {
          if (res.code === 200) {
            this.$Message.success('密码修改成功，请重新登陆')
            this.isDialog = false
            window.localStorage.removeItem('ziyunFactoryPortalToken')
            this.$router.push({path: '/'})
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
          }
        });
      } else {
        this.$Message.error(({content: "请填写完整", duration: 6, closable: true}));
      }
    },
  },
}
</script>
